import React from 'react';
import { Breadcrumb, Layout, theme } from 'antd';
import ComponentSider from "../components/componentSider";
import ComponentHeader from "../components/componentHeader";
import { Outlet } from 'react-router-dom';
const { Content } = Layout;
const Main: React.FC = () => {
    const {
        token: {  borderRadiusLG }
    } = theme.useToken();
    return (
        <Layout>
           <ComponentHeader  />
            <Layout>
                <ComponentSider />
                <Layout>
                    <Breadcrumb
                        items={[{title: 'Home'}, {title: 'List'}, {title: 'App'}]}
                        style={{margin: '16px 55px'}}
                    />
                    <Content
                        style={{
                            margin: 0,
                            borderRadius: borderRadiusLG,
                            height: 'calc(100vh - 150px)',
                            overflow: 'auto'
                        }}
                    >
                        <Outlet/>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
};

export default Main;